<template>
  <div class="monitor-management-container">
    <!-- 顶部搜索和操作区域 -->
    <el-card class="query-card">
      <el-form :model="queryForm">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item>
              <el-input v-model="queryForm.keyword" placeholder="请输入监测点名称/编号" clearable />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item>
              <el-select v-model="queryForm.monitorType" placeholder="监测类型" clearable>
                <el-option v-for="type in monitorTypes" :key="type.value" :label="type.label" :value="type.value" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item>
              <el-select v-model="queryForm.region" placeholder="所属区域" clearable>
                <el-option v-for="region in regions" :key="region.value" :label="region.label" :value="region.value" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 监测点表格 -->
    <el-card class="table-card mt-2">
      <div>
        <el-button type="primary" @click="showAddDialog">
          <el-icon>
            <Plus />
          </el-icon>
          新增配置
        </el-button>
        <el-button @click="importData">
          <el-icon>
            <Upload />
          </el-icon>
          导入
        </el-button>
        <el-button @click="exportData">
          <el-icon>
            <Download />
          </el-icon>
          导出
        </el-button>
        <el-button @click="refreshData">
          <el-icon>
            <Refresh />
          </el-icon>
          刷新
        </el-button>
      </div>
      <el-table class="mt-2" :data="tableData" border style="width: 100%" v-loading="loading"
        :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="name" label="监测点名称" />
        <el-table-column prop="type" label="监测类型" />
        <el-table-column prop="region" label="所属区域" />
        <el-table-column prop="value" label="当前值" />
        <el-table-column prop="unit" label="单位" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button type="text" @click="showEditDialog(row)">编辑</el-button>
            <el-button type="text" style="color: #F56C6C" @click="deleteMonitor(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination class="mt-2" v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
        :page-sizes="[10, 20, 50, 100]" layout="sizes, prev, pager, next, jumper" />
    </el-card>

    <!-- 新增监测点弹窗 -->
    <el-dialog v-model="addDialog.visible" title="新增监测点" width="40%">
      <el-form :model="addForm" :rules="rules" ref="addFormRef" label-width="100px">
        <el-form-item label="监测点名称" prop="name">
          <el-input v-model="addForm.name" placeholder="请输入监测点名称" />
        </el-form-item>

        <el-form-item label="监测类型" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择监测类型">
            <el-option v-for="type in monitorTypes" :key="type.value" :label="type.label" :value="type.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="所属区域" prop="region">
          <el-select v-model="addForm.region" placeholder="请选择所属区域">
            <el-option v-for="region in regions" :key="region.value" :label="region.label" :value="region.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="单位" prop="unit">
          <el-input v-model="addForm.unit" placeholder="请输入单位" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="addDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确认</el-button>
      </template>
    </el-dialog>

    <!-- 编辑监测点弹窗 -->
    <el-dialog v-model="editDialog.visible" :title="`编辑监测点 - ${editDialog.data.name}`" width="40%">
      <el-form :model="editForm" :rules="rules" ref="editFormRef" label-width="100px">
        <el-form-item label="监测点名称" prop="name">
          <el-input v-model="editForm.name" placeholder="请输入监测点名称" />
        </el-form-item>

        <el-form-item label="监测类型" prop="type">
          <el-select v-model="editForm.type" placeholder="请选择监测类型">
            <el-option v-for="type in monitorTypes" :key="type.value" :label="type.label" :value="type.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="所属区域" prop="region">
          <el-select v-model="editForm.region" placeholder="请选择所属区域">
            <el-option v-for="region in regions" :key="region.value" :label="region.label" :value="region.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="单位" prop="unit">
          <el-input v-model="editForm.unit" placeholder="请输入单位" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="editDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Plus, Upload, Download, Refresh } from '@element-plus/icons-vue'

// 查询表单
const queryForm = reactive({
  keyword: '',
  monitorType: '',
  region: ''
})

// 监测类型选项
const monitorTypes = ref([
  { value: 'water_level', label: '水位监测' },
  { value: 'flow', label: '流量监测' },
  { value: 'pressure', label: '压力监测' },
  { value: 'temperature', label: '温度监测' },
  { value: 'quality', label: '水质监测' }
])

// 区域选项
const regions = ref([
  { value: 'south', label: '南城区' },
  { value: 'north', label: '北城区' },
  { value: 'east', label: '东城区' },
  { value: 'west', label: '西城区' },
  { value: 'center', label: '中心区' }
])

// 表格数据
const tableData = ref([
  {
    id: 1,
    name: 'SOUTH监测点1',
    type: '水位监测',
    region: '南城区',
    value: '35.36',
    unit: 'm',
    updateTime: '2025/4/5 18:16:12'
  },
  {
    id: 2,
    name: 'WEST监测点2',
    type: '流量监测',
    region: '西城区',
    value: '4.12',
    unit: 'm³/h',
    updateTime: '2025/4/7 01:02:26'
  },
  {
    id: 3,
    name: 'SOUTH监测点3',
    type: '流量监测',
    region: '南城区',
    value: '12.00',
    unit: 'm³/h',
    updateTime: '2025/4/3 14:16:43'
  },
  {
    id: 4,
    name: 'SOUTH监测点4',
    type: '压力监测',
    region: '南城区',
    value: '35.34',
    unit: 'MPa',
    updateTime: '2025/4/7 04:53:42'
  },
  {
    id: 5,
    name: 'NORTH监测点5',
    type: '水位监测',
    region: '北城区',
    value: '95.90',
    unit: 'm',
    updateTime: '2025/4/4 17:35:17'
  },
  {
    id: 6,
    name: 'EAST监测点6',
    type: '流量监测',
    region: '东城区',
    value: '51.65',
    unit: 'm³/h',
    updateTime: '2025/4/5 05:56:36'
  },
  {
    id: 7,
    name: 'CENTER监测点7',
    type: '温度监测',
    region: '中心区',
    value: '7.05',
    unit: '°C',
    updateTime: '2025/4/4 16:42:49'
  },
  {
    id: 8,
    name: 'WEST监测点8',
    type: '压力监测',
    region: '西城区',
    value: '97.21',
    unit: 'MPa',
    updateTime: '2025/4/5 04:12:31'
  },
  {
    id: 9,
    name: 'EAST监测点9',
    type: '水质监测',
    region: '东城区',
    value: '82.87',
    unit: 'NTU',
    updateTime: '2025/4/10 09:08:04'
  },
  {
    id: 10,
    name: 'CENTER监测点10',
    type: '水位监测',
    region: '中心区',
    value: '80.95',
    unit: 'm',
    updateTime: '2025/4/9 16:10:54'
  }
])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(50)
const loading = ref(false)

// 新增监测点弹窗
const addDialog = reactive({
  visible: false
})

const addForm = reactive({
  name: '',
  type: '',
  region: '',
  unit: ''
})

// 编辑监测点弹窗
const editDialog = reactive({
  visible: false,
  data: {}
})

const editForm = reactive({
  name: '',
  type: '',
  region: '',
  unit: ''
})

// 表单验证规则
const rules = reactive({
  name: [{ required: true, message: '请输入监测点名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择监测类型', trigger: 'change' }],
  region: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
  unit: [{ required: true, message: '请输入单位', trigger: 'blur' }]
})

const addFormRef = ref()
const editFormRef = ref()

// 方法
const handleQuery = () => {
  loading.value = true
  // 模拟API请求
  setTimeout(() => {
    loading.value = false
  }, 500)
}

const showAddDialog = () => {
  addDialog.visible = true
  // 重置表单
  if (addFormRef.value) {
    addFormRef.value.resetFields()
  }
}

const confirmAdd = () => {
  addFormRef.value.validate((valid) => {
    if (valid) {
      // 模拟新增监测点
      tableData.value.unshift({
        id: tableData.value.length + 1,
        ...addForm,
        value: '0.00',
        updateTime: new Date().toLocaleString()
      })
      total.value += 1
      addDialog.visible = false
      ElMessage.success('新增监测点成功')
    }
  })
}

const showEditDialog = (row) => {
  editDialog.data = row
  editDialog.visible = true
  // 填充表单数据
  Object.assign(editForm, {
    name: row.name,
    type: row.type,
    region: row.region,
    unit: row.unit
  })
}

const confirmEdit = () => {
  editFormRef.value.validate((valid) => {
    if (valid) {
      // 更新监测点数据
      const index = tableData.value.findIndex(item => item.id === editDialog.data.id)
      if (index !== -1) {
        tableData.value[index] = {
          ...tableData.value[index],
          ...editForm
        }
      }
      editDialog.visible = false
      ElMessage.success('监测点信息更新成功')
    }
  })
}

const deleteMonitor = (row) => {
  ElMessageBox.confirm('确定要删除该监测点吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 从表格中删除
    tableData.value = tableData.value.filter(item => item.id !== row.id)
    total.value -= 1
    ElMessage.success('监测点删除成功')
  }).catch(() => {
    // 用户取消删除
  })
}

const importData = () => {
  ElMessage.info('导入功能待实现')
}

const exportData = () => {
  ElMessage.info('导出功能待实现')
}

const refreshData = () => {
  loading.value = true
  // 模拟刷新数据
  setTimeout(() => {
    loading.value = false
    ElMessage.success('数据刷新成功')
  }, 800)
}
</script>

<style scoped>
.monitor-management-container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total {
  font-size: 14px;
  color: #606266;
}

.query-card :deep(.el-form-item) {
    margin-bottom: 0px;
}
</style>